<!-- 人名币支付 -->
<template>
  <div class="pay">
    <div class="app-header">
      <div class="left">
        <span class="back-icon"></span>
      </div>
      <img src="../../assets/navBar.png" alt="" width="10" class="navBtn1" @click="backBtn1">
      <x-header :left-options="{showBack: false}">订单页</x-header>
      <div class="right"></div>
    </div>
    <!-- <div class="broadcast-wrap">
      <div style="height: 30px;"></div>
      <div class="panel">
        <i class="broadcast-icon"></i>
        <span style="font-size: 13px;">请在有效期内及时付款,超时订单将会自动取消</span>
      </div>
    </div> -->
    <div style="padding: 0px 10px;margin-top:8px;">
      <div class="cell-group" style="border-radius: 10px;">
        <div class="cell">
          <div style="border-bottom: 1px dashed #efefef">
            <div class="left" style="width: 100px; float: left;">投资项目：</div>
            {{detail.name}}
          </div>
        </div>
        <div class="cell">
          <div>
            <div class="left" style="width: 100px; float: left;">投资金额：</div>
            <input type="number" placeholder="请输入投资金额" v-model="amount" style="width: 55%; display: inline-block;height: 25px; line-height: 25px;border-radius: 15px;border: 1px solid #d4d4d4;padding-left: 15px; outline: none;">
          </div>
        </div>
      </div>
      <div class="cell-group" style="border-radius: 10px;">
        <div style="height: 40px;line-height: 40px;color: #999;font-size: 14px;
              padding-left: 15px;border-bottom: 1px solid #efefef;">
          请选择支付方式
        </div>
        <div style="padding-left:20px;">
          <div style="height: 40px;line-height: 40px;position: relative;">
            <img src="../../assets/coin1.png" alt="" width="22" style="vertical-align: middle;">
            <div style="position: absolute;top:0px;left:30px;">
              <input type="text" readonly style="display: inline-block;height: 25px; line-height: 25px;border-radius: 8px; border: 1px solid rgb(212, 212, 212); padding-left: 15px;outline: none;"
                v-model="btcPrice">
            </div>
            <i class="radio-icon" style="position: absolute;top: 10px;right: 10px;" @click="radioIcon(2)" :class="{active: radioFlags2}"></i>
          </div>
          <div style="height: 40px;line-height: 40px;position: relative;">
            <img src="../../assets/coin2.png" alt="" width="22" style="vertical-align: middle;">
            <div style="position: absolute;top:0px;left:30px;">
              <input type="text" readonly style="display: inline-block;height: 25px; line-height: 25px;border-radius: 8px; border: 1px solid rgb(212, 212, 212); padding-left: 15px;outline: none;"
                v-model="ethPrice">
            </div>
            <i class="radio-icon" :class="{active: radioFlags3}" style="position: absolute;top: 10px;right: 10px;" @click="radioIcon(3)"></i>
          </div>
          <div style="height: 40px;line-height: 40px;position: relative;">
            <img src="../../assets/coin3.png" alt="" width="22" style="vertical-align: middle;">
            <div style="position: absolute;top:0px;left:30px;">
              <input type="text" readonly style="display: inline-block;height: 25px; line-height: 25px;border-radius: 8px; border: 1px solid rgb(212, 212, 212); padding-left: 15px;outline: none;"
                v-model="amountPrice">
            </div>
            <img src="../../assets/helpLower.png" alt="" style="position: absolute;top: 19px;right: 15px;width: 15px;" @click="isOpen=!isOpen"
              :class="{openSty:isOpen}">
          </div>
        </div>
        <div v-if="isOpen">
          <div class="cell" style="background: #fffdf7;width: 85%; margin-left: 5%;">
            <div style="position: relative;width: 100%;">
              <div class="left">
                <div class="icon-w-fix">
                  <i class="purse-icon"></i>
                </div>
                <span>余额支付</span>
                <span style="font-size: 13px;color: #ff1010" v-if="showBanlance">(您的余额为{{typebalance}},不足于支付)</span>
                <span style="font-size: 13px;color: #ccc" v-if="!showBanlance">(您的余额为{{typebalance}})</span>
              </div>
              <!-- 余额足 -->
              <div class="right" style="position: absolute;right: 0px;top: 10px" v-if="!showBanlance">
                <i class="radio-icon" :class="{active: radioFlags0}" @click="radioIcon(0)"></i>
              </div>
              <!-- 余额不足 -->
              <div class="right" style="position: absolute;right: 0px;top: 10px" v-if="showBanlance">
                <i class="radio-icon"></i>
              </div>
            </div>
          </div>
          <div class="cell" style="background: #fffdf7;width: 85%; margin-left: 5%;">
            <div style="position: relative;border-bottom: 1px dashed #efefef;width: 100%;">
              <div class="left">
                <div class="icon-w-fix">
                  <img src="../../assets/zfbank.png" alt="" width="22">
                </div>
                <span>银行卡支付</span>
              </div>
              <div class="right" style="position: absolute;right: 0px;top: 10px">
                <i class="radio-icon" :class="{active: radioFlags1}" @click="radioIcon(1)"></i>
              </div>
            </div>
          </div>
        </div>
        <div style="padding: 0px 10px;margin-left: -10px;" v-if="status=='1'&&pro">
          <div style="height: 40px;line-height: 40px;color: #999;font-size: 14px;
            padding-left: 15px;border-bottom: 1px dashed #efefef;">
            请选择优惠券
          </div>
          <div class="cell" @click="usehb()">
            <div style="position: relative;border-bottom: 1px dashed #efefef;width: 100%;">
              <div class="left">
                <div class="icon-w-fix">
                  <i class="hb"></i>
                </div>
                <span>优惠券</span>
              </div>
              <div class="right" style="position: absolute;right: 0px;top: 0px">
                <span style="color:#999;font-size: 13px;" v-if="!hbAmount">请选择红包
                  <img src="../../assets/nav.png" alt="" width="7">
                </span>
                <span style="color:#999;font-size: 13px;" v-if="hbAmount">红包已抵扣¥{{hbAmount}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="app-bot-btn" @click="confimPay" style="overflow: hidden;">
        <span style="font-size: 18px;">立即投资</span>
      </div>
      <div class="agree-wrap" v-if="productType">
        <span>
          <i class="radio-icon" :class="{active: agreeFlag}" @click="radioAgree"></i>
        </span>
        <span class="txt">
          已同意并阅读
          <span class="link" v-for="(doc, index) in agrees[productType]" :key="index" @click="goDocuments(doc)">《{{doc}}》</span>
        </span>
      </div>
    </div>
    <confirm v-model="show" title="" @on-cancel="onCancel" @on-confirm="onConfirm">
      <p style="text-align:center;">您未绑定银行卡,是否前去绑定?</p>
    </confirm>
  </div>
</template>
<script>
  import { XHeader, Confirm, Group, XSwitch, TransferDomDirective as TransferDom } from 'vux'
  import util from '../../service/util'
  import http from '../../service/http'
  import tips from '../../service/tips'
  import axios from 'axios'
  export default {
    components: {
      XHeader,
      Confirm,
      Group,
      XSwitch,
    },
    directives: {
      focus: {
        inserted: function (el) {
          el.focus()
        }
      }
    },
    data() {
      return {
        amount: "",
        rate: "", //年回报率
        id: "",// 商品的id
        agreeFlag: true,
        isShow: true,
        productType: 'ai', // 产品类型，根据不同的产品类型显示不同的协议书
        agrees: { // 定义不同产品遵守的协议书
          ai: ['投资风险协议书', '资产委托协议书', '智能投顾招募说明'],
          etf: ['投资风险协议书', '资产委托协议书',],
          ico: ['投资风险协议书', '资产委托协议书', 'ICO协议书'],
          btc: ['投资风险协议书', '资产委托协议书', 'BTC招募说明书摘要'],
          otc: ['投资风险协议书', '资产委托协议书'],
          tetf: ['投资风险协议书', '资产委托协议书', 'ETF指数基金招募说明书'],
          tbtc: ['投资风险协议书', '资产委托协议书']
        },
        // radioFlags: [true, false],
        radioFlags0: false,
        radioFlags1: false,
        radioFlags2: true,
        radioFlags3: false,
        detail: "",
        orderid: "",//订单号
        status: "",
        hbAmount: "",
        otcType: "",
        pro: true,
        typebalance: "",
        showBanlance: "",
        bankList: [],
        show: false,
        maxValue: "",
        isOpen: false,
        price: "",
        btcPrice: "",
        ethPrice: "",
        packetList: [],
        amountPrice: "",
      }
    },
    mounted() {
      this.getPrice();
      this.rate = this.$route.query.rate;
      this.id = this.$route.query.pid;
      this.productType = this.$route.query.type;
      this.balanceNum();
      this.getVoucher();
      if (this.productType == 'tetf' || this.productType == 'tbtc') {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
      this.detail = this.$store.getters.getData;
      if (this.detail.name) {
        // if (this.detail.name.indexOf('七日标') > 0 || this.detail.name.indexOf('七天标') > 0 && this.detail.name.indexOf('7日标') > 0 && this.detail.name.indexOf('7天标') > 0 || this.detail.name.indexOf('新月') > 0) {
        //   this.pro = true;
        // }
        // if (this.detail.name.indexOf('新月') > 0) {
        //   this.otcType = 1;
        // }
      }
      this.status = this.$route.query.status;
      this.packetid = this.$route.query.packetid;
      if (this.packetid) {//如果有红包 则余额支付处于未选中状态
        this.radioFlags = false;
      } else {
        this.radioFlags = true;
      }
      this.hbAmount = this.$route.query.amount;
      this.amount = this.$route.query.money;
      this.getBank();

    },
    watch: {
      amount(newValue, oldValue) {
        this.amountPrice = newValue;
        if (this.amount > 0) {
          var price = this.amount;
          if (this.hbAmount > 0 && this.amount >= 1000) {
            var price = price - this.hbAmount;
            this.amountPrice = this.amountPrice - this.hbAmount;
          }
          this.btcPrice = (price / this.price.btcPrice).toFixed(8) + 'BTC';
          this.ethPrice = (price / this.price.ethPrice).toFixed(8) + "ETH";
        } else {
          this.btcPrice = '';
          this.ethPrice = '';
        }
        if (this.maxValue == 0) {
          return false;
        }
        if (this.amount > this.maxValue+parseInt(this.hbAmount||0)) {
          this.typebalance = this.maxValue;
          this.showBanlance = true;
          this.radioFlags0 = false;
        } else {
          this.showBanlance = false;
          if (this.radioFlags1) {
            return false;
          }
          this.radioFlags0 = false;
        }
      }
    },
    methods: {
      // 判断100元红包可不可以使用
      getVoucher() {
        this.http.get("/user/activitys/packet?id=packet").then(res => {
          if (res.data.status == 200) {
            this.packetList = res.data.body;
            this.pro = this.packetList[0].statu ? true : false
          }
        })
      },
      getPrice() {
        axios.get("http://47.52.241.237:8088/marketData/copycat/lastPrice").then(res => {
          if (res.status == 200) {
            this.price = res.data.data;
          }
        })
      },
      onCancel() {
        this.show = false;
      },
      onConfirm() {
        this.$router.push({ path: '/main/addBank' })
      },
      getBank() {
        http.get("/user/bank").then((res) => {
          if (res.data.status == 200) {
            this.bankList = res.data.body.length > 0 ? true : false;
          }
        })
      },
      // 校验余额
      balanceNum() {
        http.get("/order/enough").then((res) => {
          if (res.status == 200) {
            this.maxValue = res.data.body;
            this.typebalance = res.data.body;
            if (this.maxValue == 0) {
              this.showBanlance = true;
              this.radioFlags0 = false;
              this.radioFlags1 = false;
              return false;
            }
            if (this.amount > res.data.body) {
              this.showBanlance = true;
              this.radioFlags0 = false;
            } else {
              this.showBanlance = false;
              this.radioFlags0 = false;
              this.radioFlags1 = false;
            }
          }
        })
      },
      backBtn1() {
        history.back();
      },
      // 使用红包
      usehb() {
        this.$router.push({ path: "/main/coupon?pid=" + this.id + "&type=" + this.productType + "&status=1" + "&otcType=" + this.otcType })
      },

      placeOrder() { //下单
        //如果是eth交易或者是btc交易则用旧的订单号生成一个新的订单号
        if (this.$route.query.type == "tbtc" || this.$route.query.type == "tetf") {
          http.put("/order/newOrder", {
            orderid: this.detail.orderid,
            // payAmount: this.amount,
            // pid: this.id,
          }).then((result) => {
            if (result.data.status == 200 && result.data.status == 200) {
              this.showTips = true;
              this.orderid = result.data.body.orderid;
              var payType = 0;//余额支付
              if (this.radioFlags0) {
                var payType = 0;//余额支付
              } else {
                var payType = 2;//银行卡支付
              }
              this.$router.push({ path: "orderPayment", query: { payType: payType, payAmount: this.amount, orderid: this.orderid } })
            } else if (result.data.status == 402) {
              this.noBalance = true;
            } else {
              this.showTips = false;
              this.errTips = false;
              this.pwd1 = ""
              this.pwd2 = ""
              this.pwd3 = ""
              this.pwd4 = ""
              this.pwd5 = ""
              this.pwd6 = ""
              tips.tips(result.data.msg)
            }
          }).catch((result) => {
            this.showTips = false;
            this.errTips = false;
            this.noBalance = true;
            this.pwd1 = ""
            this.pwd2 = ""
            this.pwd3 = ""
            this.pwd4 = ""
            this.pwd5 = ""
            this.pwd6 = ""
            tips.tips(result.data.msg)
          })
          return false;
        }
        // 除eth或btc交易外
        var payObj = {
          payAmount: this.amount,
          pid: this.id,
          packetid: this.packetid,
        }
        if (this.radioFlags2) {
          payObj.coin = this.btcPrice;
        } else if (this.radioFlags2) {
          payObj.coin = this.ethPrice;
        } else {
          payObj.coin = ""
        }
        http.put('/order/newOrder', payObj).then((result) => {
          if (result.status == 200 && result.data.status == 200) { //下单成功(判断是余额支付还是银行卡支付 如果是银行卡支付 下单成功后给出接口的提示 不再调用支付的接口)
            this.showTips = true;
            this.orderid = result.data.body.orderid;
            var payType = 0;//余额支付
            if (this.radioFlags0) {
              var payType = 0;//余额支付
            } else if (this.radioFlags2 || this.radioFlags3) {
              var payType = 1;
            } else {
              var payType = 2;//银行卡支付
            }
            var coin = '';
            if (this.radioFlags2) {
              coin = "BTC";
            } else {
              coin = "ETH";
            }
            this.$router.push({ path: "orderPayment", query: { payType: payType, payAmount: this.amount, orderid: this.orderid, coinTyps: coin } })
          } else if (result.data.status == 402) {
            this.noBalance = true;
          } else {
            this.showTips = false;
            this.errTips = false;
            this.pwd1 = ""
            this.pwd2 = ""
            this.pwd3 = ""
            this.pwd4 = ""
            this.pwd5 = ""
            this.pwd6 = ""
            tips.tips(result.data.msg)
          }
        }).catch((result) => {
          tips.tips(result.data.msg)
        })
      },
      // 提交
      confimPay() {
        if (!this.amount) {
          tips.tips("请输入投资金额");
          return false;
        }
        if (!(this.radioFlags0 || this.radioFlags1 || this.radioFlags2 || this.radioFlags3)) {
          tips.tips("请选择支付方式");
          return false;
        }
        if (!this.agreeFlag) {
          tips.tips("请同意协议");
          return false;
        }
        if (this.radioFlags1) {
          if (!this.bankList) {
            this.show = true;
            return false;
          }
        }
        this.placeOrder();
      },
      radioIcon(index) {
        if (index == 0) {
          this.radioFlags0 = !this.radioFlags0;
          this.radioFlags1 = false;
          this.radioFlags2 = false;
          this.radioFlags3 = false;
          return false;
        }
        if (index == 1) {
          this.radioFlags0 = false;
          this.radioFlags1 = !this.radioFlags1;
          this.radioFlags2 = false;
          this.radioFlags3 = false;
          return false;
        }
        if (index == 2) {
          this.radioFlags0 = false;
          this.radioFlags1 = false;
          this.radioFlags2 = !this.radioFlags2;
          this.radioFlags3 = false;
          return false;
        }
        if (index == 3) {
          this.radioFlags0 = false;
          this.radioFlags1 = false;
          this.radioFlags2 = false
          this.radioFlags3 = !this.radioFlags3;
          return false;
        }
      },
      radioAgree() {
        this.agreeFlag = !this.agreeFlag
      },
      goDocuments(doc) {
        switch (doc) {
          case '投资风险协议书':
            // console.log('投资风险协议书')
            this.$router.push({ path: "/investmentRisk" })
            break;
          case '资产委托协议书':
            // console.log('资产委托协议书')
            this.$router.push({ path: "/assetDelegation" })
            break;
          case '智能投顾招募说明':
            // console.log('智能投顾招募说明')
            this.$router.push({ path: "/aiInstruction" })
            break;
          case 'ICO协议书':
            // console.log('ICO协议书')
            this.$router.push({ path: "/icoProtocol" })
            break;
          case 'BTC招募说明书摘要':
            // console.log('BTC招募说明书摘要')
            this.$router.push({ path: "/btcRecruit" })
            break;
          case 'ETF指数基金招募说明书':
            this.$router.push({ path: "/etfAgreement" })
            break;
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .pay {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: #f6f6f6 !important;
  }

  .pay .vux-header {
    position: relative;
    padding: 3px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: linear-gradient(left, #fedb30, #fea00b) !important;
    background: -webkit-gradient(linear, left top, right top, from(#fedb30), to(#fea00b)) !important;
  }

  .pay .c3 {
    color: #333;
  }

  .pay .vux-header .vux-header-left .left-arrow:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid #fff;
    border-width: 1px 0 0 1px;
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
    top: 8px;
    left: 7px;
  }

  .pay .card-wrap {
    margin-top: 0.71rem;
    background-color: #ffffff;
    margin-bottom: 40px;
    padding: 3rem 1.07rem;
    .card+.card {
      margin-top: 2.14rem;
    }
    .card {
      color: #333333;
      text-align: center;
      border-radius: 24px;
      box-shadow: 2px 2px 34px -7px #00000078;
      .title {
        padding: 0.71rem 0;
        box-shadow: 0 1px 0 0 #EFEFEF;
      }
      .content {
        padding: 1.07rem;
        .prompt {
          display: block;
          color: #FF1010;
          width: 84%;
          margin: 20px auto 40px auto;
          font-size: 0.92rem;
        }
        .address-code {
          box-shadow: inset 0 0 10px 0 rgba(220, 220, 220, 0.50);
          border-radius: 6px;
          padding: 0.28rem 0;
          font-size: 0.92rem;
        }
        .qrcode {
          margin: 20px 0;
        }
        .copy-wrap {
          margin-bottom: 10px;
          &>* {
            padding: 0.42rem 2rem;
            border-radius: 2rem;
            border: 1px solid #FEA620;
            color: #FEA620;
            display: inline-block;
          }
        }
      }
      .qrcode {
        width: 30vw;
        height: 30vw;
        max-width: 250px;
        max-height: 250px;
      }
    }
  }

  .pay .app-bot-btn {
    margin-top: 20px;
    margin-bottom: 10px;
    height: 40px;
    line-height: 40px;
    >* {
      display: block;
      background-image: linear-gradient(-135deg, #FEDF33 0%, #FE9D09 100%);
      box-shadow: 0 0 3px 1px rgba(254, 215, 46, 0.50);
      border-radius: 1rem;
      color: #ffffff;
      text-align: center;
      font-size: 1.57rem;
      /* padding: 0.57rem 0; */
    }
  }

  .pay .agree-wrap {
    display: flex;
    justify-content: center;
    width: 80%;
    margin: 20px auto 30px auto;
    .radio-icon {
      margin-right: 0.5em;
      margin-top: 0.1em;
    }
    .txt {
      color: #666666;
      font-size: 13px;
      .link {
        color: #1b94f5;
      }
    }
  }

  .pay .radio-icon {
    display: inline-block;
    border: 1px solid #d8d7d7;
    width: 1.28rem;
    height: 1.28rem;
    border-radius: 50%;
    position: relative;
    &.active {
      border-color: #FEA620;
      &:after {
        display: inline-block;
        width: 0.85rem;
        height: 0.85rem;
        content: '';
        background-color: #FEA620;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        border-radius: 50%;
      }
    }
  }

  .pay .cell-group+.cell-group {
    margin-top: 0.71rem;
  }

  .pay .cell-group {
    background-color: #ffffff;
    .cell {
      justify-content: space-between;
      height: 50px;
      line-height: 50px;
      padding: 0px 10px;
      .left,
      .right {
        display: flex;
        align-items: center;
      }
      .left {
        color: #333333;
        &.title {
          color: #999999;
          margin-top: 0.35rem;
        }
        .icon-w-fix {
          width: 42px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 0.5rem;
        }
      }
      .right {
        color: #FEA620;
        &.amount {
          color: #999999;
        }
      }
    }
    /* .cell+.cell {
      box-shadow: 0 -1px 0 0 #EFEFEF;
    } */
  }

  .pay .broadcast-wrap {
    /* padding: 1.07rem 1.42rem; */
    position: relative;
    &:after {
      height: 50%;
      display: block;
      content: '';
      position: absolute;
      width: 100%;
      background-color: #ffffff;
      bottom: 0;
      left: 0;
    }
    .panel {
      /* padding: 0.57rem; */
      background-color: #ffffff;
      /* border-radius: 12px; */
      box-shadow: 0px 2px 46px -3px #0000002e;
      position: relative;
      z-index: 99;
      color: #FFB818;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 90%;
      left: 5%;
      /* border: 1px solid #ccc; */
      box-shadow: 1px 1px 1px #ccc;
      top: -15px;
      height: 30px;
      line-height: 30px;
      border-radius: 8px;
      .broadcast-icon {
        margin-right: 0.5rem;
      }
    }
  }


  .pay .broadcast-icon,
  .pay .purse-icon,
  .pay .union-icon {
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
  }

  .pay .hb {
    width: 22px;
    height: 22px;
    background-image: url("../../assets/hb.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
  }

  .pay .broadcast-icon {
    width: 1em;
    height: 1em;
    background-image: url("../../../static/images/common/broadcast.png");
  }

  .pay .purse-icon {
    width: 22px;
    height: 22px;
    background-image: url("../../../static/images/common/purse.png");
  }

  .pay .union-icon {
    width: 42px;
    height: 22px;
    background-image: url("../../../static/images/common/union.png");
  }

  .pay .tips {
    position: fixed;
    background: rgba(0, 0, 0, 0.3);
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 999;
    .tips-top {
      position: absolute;
      top: 40%;
      height: 60%;
      background: #fff;
      width: 100%;
      border-bottom: 1px solid #f6f6f6;
      img {
        position: absolute;
        left: 15px;
        top: 15px;
      }
    }
  }

  .pay .tips-center {
    padding-left: 10%;
    margin-top: 45px;
  }

  .pay .tips-center li {
    float: left;
    width: 15%;
    list-style: none;
    height: 45px;
    line-height: 45px;
    border: 1px solid #ccc;
    border-right: none;
    overflow: hidden;
    text-align: center;
    input {
      border: none;
      outline: none;
      height: 45px;
      line-height: 45px;
      width: 100%;
      display: block;
      text-align: center;
    }
  }

  .pay .tips-center li:last-child {
    border-right: 1px solid #ccc;
  }

  .pay .forgetPassWord {
    position: absolute;
    right: 28px;
    top: 150px;
    color: #fea620;
  }

  .pay .errTips {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
  }

  .pay .errTipsBox {
    position: absolute;
    top: 40%;
    width: 90%;
    height: 130px;
    background: #fff;
    margin-left: 5%;
    border-radius: 15px;
    .errTips-top {
      height: 60px;
      line-height: 60px;
      text-align: center;
      border-bottom: 1px solid #efefef;
    }
    .errTipsBtn {
      span {
        display: inline-block;
        width: 48%;
        text-align: center;
        margin-top: 15px;
        color: #fea620;
      }
      .active {
        border-right: 1px solid #efefef;
      }
    }
  }

  .pay .setPassWorldTips {
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
  }

  .pay .setPasswordText {
    position: absolute;
    top: 40%;
    height: 130px;
    background: #fff;
    width: 90%;
    margin-left: 5%;
    border-radius: 15px;
    .setPassWorldTitle {
      height: 60px;
      line-height: 60px;
      text-align: center;
      border-bottom: 1px solid #efefef;
      color: #000;
    }
    .goPassworld {
      height: 70px;
      line-height: 65px;
      color: #fea620;
      text-align: center;
    }
  }

  .pay .noBalance {
    position: fixed;
    background: rgba(0, 0, 0, 0.3);
    top: 40%;
    height: 125px;
    width: 70%;
    text-align: center;
    color: #fff;
    color: #fff;
  }

  .pay .closeBtn {
    background: #fff;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 50%;
  }

  .pay .rechargeBalance {
    width: 70%;
    height: 30px;
    line-height: 30px;
    background: #fff;
    color: #333;
    margin-left: 15%;
    border-radius: 15px;
    margin-top: 10px
  }

  .navBtn1 {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 888;
    transform: rotate(180deg);
  }

  .openSty {
    transform: rotate(180deg);
    transition: all 1s;
  }
</style>